<template>
	<view class="content">
		<form @submit="createReport">
			<view class="list">
				<view class="list-title">选择模板</view>
				<view class="list-item">模板列表：
					<picker mode="selector" style="padding:0px;margin:0px;" range-key="name" :range="myTplList"
					 @change="tplChange">
						<view class="xiala">
							{{tplName}}
							<image src="/static/xl.png"></image>
						</view>
					</picker>
				</view>
				<view>
					<!-- json schema -->
					<json-editor v-if="Object.keys(schema).length && schemaIsShow" ref="JsonEditor" :schema="schema" v-model="model">
					</json-editor>
				</view>
			</view>

			<view class="list">
				<!-- 数据表：ha_report_list
				name: "", // string 报备名称
				is_active: 1, // int 是否激活
				interval_hour: 0, // int 间隔小时数0表示只能提交单次，其他间隔时间可以重复提交
				check_member: 1, // int 是否检查是不是团体成员，0不检查 -->

				<view class="list-title">报备设置</view>

				<view class="list-item">报备名称： <input name="name" placeholder="请输入报备名称" /></view>

				<!-- <view class="list-item">是否启用：
					<button v-if="isActive==''" type="primary" size="mini" @click="selectChange(1)">是</button>
					<button	v-if="isActive==''" type="warn" size="mini" style="margin-left:30upx;" @click="selectChange(2)">否</button>
					<button v-if="isActive!=''" size="mini" @click="resetSelect(1)">{{isActive}}</button>
				</view> -->

				<!-- <view class="list-item">是否需要检查团体成员：
					<button v-if="checkMember==''" type="primary" size="mini" @click="selectChange(3)">是</button>
					<button	v-if="checkMember==''" type="warn" size="mini" style="margin-left:30upx;" @click="selectChange(4)">否</button>
					<button v-if="checkMember!=''" size="mini" @click="resetSelect(2)">{{checkMember}}</button>
				</view> -->

				<view class="list-item">重复提交间隔时间：
					<picker mode="selector" :range="hourList" @change="selectInterval">
						<button size="mini" style="margin-left:20upx;margin-right:20upx">{{intervalHourName}}</button>
					</picker>
				</view>

			</view>

			<view class="list">
				<button style="width: 100%;" form-type="submit">创建报备</button>
			</view>
		</form>
	</view>
</template>

<script>
	// import vue-json-ui-editor
	import JsonEditor from 'vue-json-ui-editor';

	JsonEditor.setComponent('form', 'div');

	export default {
		components: { JsonEditor },
		data() {
			return {
				title: "新建报备",

				myTplList: [
				],
				tplID: "",
				tplName: '请选择',
				tplErr: 0, // 模板出错

				schemaIsShow: true,
				// schema
				schema: {},
				// data
				model: {},

				isActive: '',
				checkMember: '',
				hourList: [
					'0不能重复提交',
					'1小时',
					'2小时',
					'3小时',
					'4小时',
					'5小时',
					'6小时',
					'7小时',
					'8小时',
					'9小时',
					'10小时',
					'11小时',
					'12小时'
				],
				intervalHourValue: 0,
				intervalHourName: '请选择时间'
			}
		},
		onLoad() {
			this.getMyTplList();
		},
		created() {
			// this.getMyTplList();
		},
		methods: {
			schemaReload () {
				this.schemaIsShow = false;
				this.$nextTick(function () {
					this.schemaIsShow = true;
				});
			},
			getMyTplList() {
				let account_id = uni.getStorageSync("uid");

				uniCloud.callFunction({
					name: "ha_get_my_tpl",
					data: {
						account_id
					},
					success: ({result}) => {
						// console.log(result)

						this.myTplList = result;
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			tplChange: function(e) {
				// console.log(e.detail);
				this.tplID = this.myTplList[e.detail.value]._id
				this.tplName = this.myTplList[e.detail.value].name
				this.schema = this.myTplList[e.detail.value].content;
				this.schemaReload();
			},
			selectChange: function(e) {
				// console.log(e);
				if (e == 1) {
					this.isActive = "是";
				}
				if (e == 2) {
					this.isActive = "否";
				}
				if (e == 3) {
					this.checkMember = "是";
				}
				if (e == 4) {
					this.checkMember = "否";
				}
			},
			resetSelect: function(e) {
				if (e == 1) {
					this.isActive = "";
				}
				if (e == 2) {
					this.checkMember = "";
				}
			},
			selectInterval: function(e) {
				// console.log(e.detail);
				this.intervalHourValue = e.detail.value;
				this.intervalHourName = this.hourList[e.detail.value];
			},

			createReport: function(e) {
				// console.log(e.detail.value);
				let name = e.detail.value.name;

				if (this.tplID == "") {
					uni.showToast({
						title: '请选择模板！',
						icon: 'none'
					})
					return
				}
				if (this.tplErr != 0) {
					uni.showToast({
						title: '模板错误，请重新选择！',
						icon: 'none'
					})
					return
				}

				if (!name) {
					uni.showToast({
						title: '请输入模板名称！',
						icon: 'none'
					})
					return
				}

				let uid = uni.getStorageSync("uid");
				if ( !uid ) {
					uni.showToast({
						title: '请先登录！',
						icon: 'none'
					})
					return
				}
				let group_id = uni.getStorageSync("group_id");
				if ( !group_id ) {
					uni.showToast({
						title: '请先进入团体，再创建！',
						icon: 'none'
					})
					return
				}

				let data = {
					uid,
					group_id,
					tpl_id: this.tplID,
					name,
					is_active: this.isActive=="否"?0:1,
					check_member: this.checkMember=="否"?0:1,
					interval_hour: this.intervalHourValue
				};

				uniCloud.callFunction({
					name: "ha_add_report",
					data,
					success: ({result}) => {
						// console.log(result);

						if ( result.status === 0 ) {
							uni.showToast({
								title: `${result.msg || "创建成功！"}`,
								duration: 1000
							});
							// location.reload();
							uni.redirectTo({
								url: "/pages/report/report_detail?report_id="+result.report_id
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: `${result.msg || "网络异常，请稍后重试！"}`,
								duration: 1000
							});
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #f0f0f0;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 50upx;
	}

	.list {
		display: flex;
		flex-direction: column;
		width: 680upx;
		margin: auto;
		margin-top: 20upx;
		background: #ffffff;
		border-radius: 20upx;
		padding-bottom: 20upx;
	}

	.list-title {
		width: 580upx;
		padding: 20upx;
		display: flex;
		font-size: 40upx;
		font-weight: bold;
		border-bottom: #f0f0f0 1upx solid;
		margin: auto;
		margin-bottom: 20upx;

	}

	.list-item {
		width: 580upx;
		padding: 20upx;
		display: flex;
		margin: auto;
		font-size: 30upx;
		align-items: center;
	}

	.list-item input {
		background: #f0f0f0;
		border-radius: 10upx;
		padding-left: 20upx;
		padding-right: 20upx;
		width: 300upx;
		height: 60upx;
		color: #999999;
		font-size: 30upx;

	}

	.xiala {
		display: flex;
		background: #f0f0f0;
		padding: 10upx;
		border-radius: 10upx;
		color: #999999;
		font-size: 30upx;

	}

	.xiala image {
		display: flex;
		padding-top: 5upx;
		width: 30upx;
		height: 30upx;
		margin-left: 10upx;

	}
</style>
